<!-- <page-grid> -->
  <p style="padding: 5px;"></p>
  <div nz-row [nzGutter]="24">
    <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="18">
      <nz-card [nzTitle]="'活动实时交易情况'" [nzBordered]="false" class="mb-lg">
        <div nz-row>
          <div nz-col nzXs="24" nzSm="12" nzMd="6">
            <number-info [subTitle]="'历史放款总量'" [total]="product.fxjOut11" suffix="元"></number-info>
          </div>
          <div nz-col nzXs="24" nzSm="12" nzMd="6">
            <number-info [subTitle]="'本月累计放款量'" [total]="product.fxjOut12" suffix="元"></number-info>
          </div>
          <div nz-col nzXs="24" nzSm="12" nzMd="6">
            <number-info [subTitle]="'进件量'" [total]="product.fxjOut13" suffix="件"></number-info>
          </div>
          <div nz-col nzXs="24" nzSm="12" nzMd="6">
            <number-info [subTitle]="'剩余天数'" [total]="product.fxjOut14" suffix="天"></number-info>
          </div>
        </div>
        <div class="map-chart">
          <img src="https://gw.alipayobjects.com/zos/rmsportal/HBWnDEUXCnGnGrRfrpKa.png" alt="map">
        </div>
      </nz-card>
    </div>
    <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="6">
      <nz-card [nzTitle]="'活动情况预测'" [nzBordered]="false" class="mb-lg">
        <!-- <div class="active-chart" *ngIf="activeData"> -->
        <div class="active-chart">
          <number-info subTitle="目标评估" [total]="product.fxjOut15" suffix="元" total="有望达到预期"></number-info>
          <g2-mini-area [animate]="false" line [borderWidth]="2" [height]="84" padding="0" [data]=""></g2-mini-area>
          <div class="active-grid">
            <p>实际金额 {{product.fxjOut16}} 元</p>
            <p>目标金额 {{product.fxjOut17}} 元</p>
          </div>
          <!-- <div class="active-legend">
            <span>00:00</span>
            <span>{{activeStat.t1}}</span>
            <span>{{activeStat.t2}}</span>
          </div> -->
        </div>
      </nz-card>
      <nz-card [nzTitle]="'转化率'" [nzBordered]="false" [nzBodyStyle]="{'text-align': 'center'}" class="mb-lg">
        <g2-gauge *ngIf="percent" [title]="'跳出率'" [height]="180" [percent]="product.fxjOut18" [format]="couponFormat"></g2-gauge>
      </nz-card>
    </div>
  </div>
  <div nz-row [nzGutter]="24">
    <div nz-col class="mb-lg">
      <nz-card [nzTitle]="'产品业务占比'" [nzBordered]="false" class="pie-card">
        <div nz-row [nzGutter]="4" style="padding:16px 0">
          <div nz-col [nzSpan]="5" class="w20">
            <g2-pie [animate]="false" [percent]="28" [subTitle]="'汽车直租'" total="28%" [height]="128" [lineWidth]="2"></g2-pie>
          </div>
          <div nz-col [nzSpan]="5" class="w20">
            <g2-pie [animate]="false" color="#5DDECF" [percent]="22" [subTitle]="'汽车回租'" total="22%" [height]="128" [lineWidth]="2"></g2-pie>
          </div>
          <div nz-col [nzSpan]="5" class="w20">
            <g2-pie [animate]="false" color="#cd28f0" [percent]="32" [subTitle]="'汽车消费'" total="32%" [height]="128" [lineWidth]="2"></g2-pie>
          </div>
          <div nz-col [nzSpan]="5" class="w20">
            <g2-pie [animate]="false" color="#fbcd14" [percent]="22" [subTitle]="'汽车库融'" total="22%" [height]="128" [lineWidth]="2"></g2-pie>
          </div>
          <div nz-col [nzSpan]="5" class="w20">
            <g2-pie [animate]="false" color="#1dc14f" [percent]="32" [subTitle]="'企业购车'" total="32%" [height]="128" [lineWidth]="2"></g2-pie>
          </div>
        </div>
      </nz-card>
    </div>
  </div>

  <!-- <nz-card [nzBordered]="false" nzTitle="详细数据">
    <nz-table #basicTable [nzData]="listOfData" [nzTotal]="85" [nzShowTotal]="totalTemplate" [nzPageSize]="10" [nzPageSizeOptions]="[ 10, 20, 30, 40, 50 ]" nzShowQuickJumper nzShowSizeChanger>
      <thead>
      <tr>
        <th>省市</th>
        <th>申请量/件</th>
        <th>放款量/件</th>
        <th>转化率</th>
        <th>同比%</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of basicTable.data">
        <td>{{data.provinces}}</td>
        <td>{{data.volume}}</td>
        <td>{{data.loan}}</td>
        <td>{{data.conversionRate}}</td>
        <td>{{data.onYear}}</td>
      </tr>
      </tbody>
    </nz-table>
    <ng-template #totalTemplate let-total> Total {{ total }} items </ng-template>
  </nz-card> -->
<!-- </page-grid> -->
